<template>
    <div id='login'>
            <el-form :model="loginForm" status-icon :rules="rules2" ref="loginForm" class="demo-ruleForm">
                <h3 class="title">系统登录</h3>
                <el-form-item prop="userName">
                    <el-input name="userName" type="text" v-model="loginForm.userName" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input name="password" type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleLogin" class='submitBtn'>提交</el-button>
                </el-form-item>
            </el-form>
        </div>
</template>

<script>
import {loginByUsername} from '@/api/login'
import '@/icons/index'
import Cookies from 'js-cookie'
export default {
   name: 'login',
   data () {
       return({
           loginForm:{
                userName: '',
                password: '',
            },
           rules2: {

           }
       })
   },
   mounted (){
   },
   methods: {
       handleLogin () {
           let params = this.loginForm
           this.$store.dispatch('LoginByUsername',params).then(() => {
               this.$router.push({ path: '/dashboard' })
            }).catch((err) =>{

            })
       }
   },
   components: {
   }
}
</script>

<style lang="stylus" >
    @import "~@/common/stylus/variable";
    $bg = #2d3a4b;
    $dark_gray  = #889aa4;
    $light_gray  = #eee; 
    #login
        height 100vh
        background-color $bg
        overflow hidden
        .demo-ruleForm
            position absolute
            left 0
            right 0
            width 400px
            padding 35px 35px 15px 35px
            margin 120px auto
            .title
                font-size 26px
                font-weight 400
                color $light_gray
                margin 0px auto 40px auto
                text-align center
                font-weight bold
            .submitBtn
                width 100% 
            .el-form-item
                width 100%
                border 1px solid rgba(255, 255, 255, 0.1)
                background rgba(0, 0, 0, 0.1)
                border-radius 5px
                color #454545
                .el-input 
                    display inline-block
                    height 47px
                    .el-input__inner
                        background transparent
                        border 0px
                        -webkit-appearance none
                        border-radius 0px
                        padding 12px 5px 12px 15px
                        color $light_gray
                        height 47px
        .ss 
            width 5em 
            height 6em
            vertical-align -0.15em
            fill currentColor
            overflow hidden
            color red
</style>


